<template>
	<view>
		<!-- 替换仓库选择部分 -->
		<view v-if="isAdmin" class="tab-container">
			<scroll-view class="tab-scroll" scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false">
				<view class="tab-content">
					<span 
						v-for="(item,index) in list_site" 
						:key="index" 
						@click="choose(item.id)"
						:class="item.handle ? 'choose_bg' : 'bg'"
						class="tab-item"
					>{{item.text}}</span>
				</view>
			</scroll-view>
		</view>
		<view v-else class="tab">
			<span class="normalBg" style="width: 50%;">{{site_id}}仓</span>
		</view>
		
		<view class="w">
			<view class="content">
				<u-tabs-swiper ref="uTabs" name="operation" :list="list_operation" @change="tabsChange"
					:is-scroll="false" active-color="#9EB8E3" inactive-color="#303133" :current="current"
					font-size="30"></u-tabs-swiper>
				<!-- 可能可以通过不同的宽度去适配不同的设备 -->
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 70vh;"
			>
				<swiper-item class="swiper-item" v-for="i in components" :key="i.id">
					<!-- <AdLay></AdLay> -->
					<!-- 动态挂载利用if判定 -->
						<component :is="i.name" v-if="i.choose" :site_id="site_id" :id="i.name"></component>
				</swiper-item>
			</swiper>
			<!-- 详细数据入口 -->
			<!-- <view class="more" @click="toReadNFC">
				详细数据
			</view> -->
		</view>
	</view>
</template>

<script>
	import AdWhipStay from '../ad-whipStay/ad-whipStay.vue'
	import AdLay from '../ad-lay/ad-lay.vue'
	import AdPut from '../ad-put/ad-put.vue'
	import AdAbnormal from '../ad-abnormal/ad-abnormal.vue'
	import { mapGetters } from 'vuex'
	import Cookie from '@/utils/cookie.js'
	
	export default {
		components:{
			AdWhipStay,
			AdLay,
			AdPut,
			AdAbnormal
		},
		data() {
			return {
				components:[{
					id: 0,
					name: 'AdLay',
					choose: true,
				},{
					id: 1,
					name: 'AdWhipStay',
					choose: false
				},{
					id: 2,
					name: 'AdPut',
					choose: false
				},{
					id: 3,
					name: 'AdAbnormal',
					choose: false
				}],
				list_site: [], // 动态生成的仓库列表
				list_operation: [{
					operation: '产蛋',
				}, {
					operation: '抽蛋留窝',
				}, {
					operation: '放仔',
				}, {
					operation: '异常',
				}],
				site_id: null, // 当前选中的仓库ID
				// 全屏选型卡
				current: 0,
				swiperCurrent: 0,
				// 当前页面显示的子组件
				currentComponent: 'AdLay',
				scrollLeft: 0
			};
		},
		computed: {
			...mapGetters(['allSites', 'operationSiteId']),
			// 判断是否为管理员
			isAdmin() {
				return Cookie.get('ROLE') === 'admin'
			}
		},
		watch:{
			site_id(newValue,oldValue){
				// 除了当前组件的其他组件在点击时重新挂载
				this.components.filter(item => {
					if(item.id !== this.swiperCurrent){
						item.choose = false
						// console.log(item.name+'被false了')
					}
				})
			},
			// 监听仓库列表变化，重新生成仓库选项
			allSites: {
				handler(newVal) {
					console.log('仓库列表变化:', newVal);
					this.generateSiteList();
				},
				deep: true
			},
			// 监听当前操作站点变化
			operationSiteId(newVal) {
				console.log('操作站点变化:', newVal);
				this.generateSiteList();
			}
		},
		onPullDownRefresh() {
			this.refreshCurrentComponent()
		},
		created() {
			// 生成仓库列表
			this.generateSiteList();
		},
		onShow() {
			// 确保页面显示时刷新数据
			this.generateSiteList();
		},
		methods: {
			// 动态生成仓库列表 - 采用与 putList.vue 相同的方式
			generateSiteList() {
				console.log('生成仓库列表 - 开始');
				console.log('当前用户角色:', Cookie.get('ROLE'));
				console.log('allSites:', this.allSites);
				console.log('operationSiteId:', this.operationSiteId);
				
				this.list_site = [];
				
				if (this.isAdmin && this.allSites && this.allSites.length > 0) {
					console.log('管理员模式，显示所有仓库');
					
					// 管理员显示所有仓库
					this.allSites.forEach(site => {
						this.list_site.push({
							id: site,
							text: `${site}仓`,
							handle: site === this.operationSiteId
						});
					});
					
					// 设置默认选中的仓库ID
					this.site_id = this.operationSiteId;
				} 
				else if (!this.isAdmin && this.operationSiteId !== undefined && this.operationSiteId !== null) {
					console.log('普通员工模式，显示当前仓库');
					
					// 普通员工只显示自己的仓库
					this.list_site.push({
						id: this.operationSiteId,
						text: `${this.operationSiteId}仓`,
						handle: true
					});
					this.site_id = this.operationSiteId;
				}
				// 如果数据有问题，显示默认值
				else {
					console.log('使用默认值');
					this.list_site.push({
						id: 1,
						text: '1仓',
						handle: true
					});
					this.site_id = 1;
				}
				
				console.log('生成的仓库列表:', this.list_site);
				console.log('当前选中的site_id:', this.site_id);
				
				// 滚动到选中的仓库
				this.$nextTick(() => {
					this.scrollToSelected();
				});
			},
			// 滚动到选中的仓库
			scrollToSelected() {
				const selectedIndex = this.list_site.findIndex(item => item.id === this.site_id);
				if (selectedIndex !== -1) {
					// 计算滚动位置，使选中的仓库居中显示
					this.scrollLeft = (selectedIndex - 1) * 150; // 150是每个仓库项的预估宽度
				}
			},
			// 切换仓库
			choose(siteId) {
				this.site_id = siteId
				// 更新选中状态
				this.list_site.forEach(item => {
					item.handle = item.id === siteId
				})
				// 滚动到选中的位置
				this.$nextTick(() => {
					this.scrollToSelected();
				});
			},
			// 刷新子组件
			refreshCurrentComponent(){
				switch (this.current){
					case 0:
						this.currentComponent = 'AdLay';
						break;
					case 1:
						this.currentComponent = 'AdWhipStay';
						break;
					case 2:
						this.currentComponent = 'AdPut';
						break;
					case 3:
						this.currentComponent = 'AdAbnormal';
						break;
					default:
						break;
				}
				// console.log('curr',this.currentComponent)
				this.selectComponent(`#${this.currentComponent}`).refresh()
			},
			changeTab(componentName){
				// console.log('change')
				this.currentComponent = componentName
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.components[index].choose = true
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current  ;
				this.current = current;
				this.components[current].choose = true
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			toReadNFC(){
				uni.setStorageSync('control','历史操作')
				uni.navigateTo({
					url: '/pages/readNFC/readNFC'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: #E8F2FC;
	}

	.choose_bg {
		background-color: #9EB8E3;
	}

	.normalBg {
		display: block;
		background-color: #9EB8E3;
		width: 100%;
		color: #ffffff;
	}

	.tab-container {
		position: sticky;
		top: 0;
		height: 10vh;
		background-color: #fff;
		z-index: 10;
	}

	.tab-scroll {
		width: 100%;
		height: 100%;
		white-space: nowrap;
	}

	.tab-content {
		display: inline-flex;
		align-items: center;
		height: 100%;
		padding: 0 20rpx;

		.tab-item {
			flex-shrink: 0;
			width: 132rpx;
			height: 54rpx;
			margin: 0 10rpx;
			text-align: center;
			line-height: 54rpx;
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.tab {
		display: flex;
		position: sticky;
		top: 0;
		justify-content: space-evenly;
		align-items: center;
		height: 10vh;
		background-color: #fff;

		span {
			width: 132rpx;
			height: 54rpx;
			text-align: center;
			line-height: 54rpx;
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 32rpx
		}
	}
	
	.more{
		width: 50%;
		height: 80rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 80rpx;
		font-size: 40rpx;
		// font-weight: bold;
		background-color: #FF8B33;
		color: #fff;
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		transform: translate(-50%);
		border-radius: 26px;
	}
</style>